<template>  
  <mt-tabbar v-model="selectedTab" fixed>
     <mt-tab-item v-for = "(item,i) of tabbarItems" :key ="i" :id="i" >
       <tabbaricon
        :focused="tabbarSelected[i]"
        :selectedImage="tabbarItems[i].selected"
        :normalImage="tabbarItems[i].normal"
      ></tabbaricon>{{tabbarItems[i].title}}
      </mt-tab-item>      
  </mt-tabbar>
</template>

<script>
import TabBarIcon from "@/components/TabbarIcon";
export default {
  data() {
    return {
      selectedTab: 0, //选中的TabBar
      //创建数组保存tabbar图片状态
      tabbarSelected: [true, false, false, false], //第1\2\3\4个按钮是否选中状态
      tabbarItems:[
        {
          title:"首页",
          routeName:"home",
          normal:   require('@/assets/images/ic_weixin_normal.png'),
          selected: require('@/assets/images/ic_weixin_selected.png'),
        },
        {
          title:"分类",
          routeName:"category",
          normal:   require('@/assets/images/ic_contacts_normal.png'),
          selected: require('@/assets/images/ic_contacts_selected.png') ,
        },
        {
          title:"购物车",
          routeName:"shopcart",
          normal:   require('@/assets/images/ic_find_normal.png'),
          selected: require('@/assets/images/ic_find_selected.png'),
        },
        {
          title:"我的",
          routeName:"user",
          normal:   require('@/assets/images/ic_me_normal.png'),
          selected: require('@/assets/images/ic_me_selected.png'),
        },
      ]  
    };
  },
  components: {
    tabbaricon: TabBarIcon,
  },
  watch: {
    selectedTab(newVal) {
      let index = newVal; 
      this.selectedTab = index;
      this.tabbarSelected = [false, false, false, false];
      this.tabbarSelected[index] = true;
      //console.log(this.tabbarSelected)
      if(this.$route.name !=this.tabbarItems[index].routeName){
        this.$router.push({name:this.tabbarItems[index].routeName});
      }
    },
  },
};
</script>
<style scoped>
.mint-tabbar > .mint-tab-item.is-selected {
  background-color: transparent;
  color: #28a745;
}
.mint-tabbar > .mint-tab-item {
  color: #6c757d;
}
</style>
